<template>
  <div style="background: #ffd9df;">
    <div class="pos-relative text-c">
      <!-- 头部图片 -->
      <img src="../../static/new/activity_img_bg@2x.png" class="img-top" />

      <!-- 秒杀时间 -->
      <div class="pos-absolute time-box">
        <img src="../../static/new/img_time@2x.png" class="width-50" />
        
        <!-- 定位时间 -->
        <div class="flex-display flex-center-align flex-center-pack countBox">
          <div class="flex-num-one"></div>
          <div class="countBox-info">
            <span>{{ day }}</span>
            <span>{{ endHours }}</span>
            <span>{{ endMinutes }}</span>
            <span>{{ endSecnods }}</span>
          </div>
          <div class="flex-num-one"></div>
        </div>
      </div>
    </div>

    <!-- 秒杀列表 -->
    <!-- <div style="padding:0 15px 15px 15px;width: 100%;height: 140px;margin-bottom:15px ">
      <ul style="width: 100%; display: flex;">
        <li v-for="(item,index) in goodslist" :key="index" class="goods">
          <div style="flex:1;">
            <img :src="item.photo?item.photo:'../../static/img/not-data.png'" style="width: 89%;margin:15px;height: 110px;" @click="lookImg(item.photo)" />
          </div>
          <div class="goods-right">
            <p v-html="item.describe.slice(0,28)"></p>
            <p class="flex-display">
              <span class="flex-num-one">库存:{{ item.inventory }}</span>
              <span>销量:{{item.sales}}</span>
            </p>
            <div class="goods-btn" @click="fnPalyer(item)">
              <span>{{item.new_price}}</span>
              <span>元</span>
              <span>点击购买</span>
            </div>
          </div>
        </li>
      </ul>
    </div> -->

    <!-- 秒杀图片 -->
    <div class="expre-box">
      <!-- 详情图 -->
      <img src="../../static/new/img_details@2x.png" class="width-100" />
      <!-- 体验装 -->
      <div class="flex-display flex-center-pack expre-box__img">
        <img src="../../static/new/img_experience@2x.png" />
      </div>
      <!-- 抢购图标 -->
      <div @click="fnPalyer(goodslist[0])" class="expre-buy__img">
        <img src="../../static/new/but_buy@2x.png" alt="" />
      </div>
    </div>

    <!-- 订单列表 -->
    <div v-if="isShowList" id="box" class="order-box pos-relative">
      <div class="msg">团队购买量：{{ bugNum }}</div>
      <!-- 订单tabbar -->
      <div class="top-btn flex-display">
        <div
          @click="fnChangeOrderType(1)"
          :class="orderType==1?'orderType-haveline fw-600':'orderType-noline'"
        >
          待付款订单 ({{ this.nopaylist.length }})
        </div>
        <div
          @click="fnChangeOrderType(2)"
          :class="orderType==2?'orderType-haveline fw-600':'orderType-noline'"
        >
          已付款订单 ({{ this.paylist.length }})
        </div>
      </div>
      <div class="line-box">
        <div
          class="line"
          :class="orderType==1?'changemargin-a':'changemargin-b'"
        ></div>
      </div>
      <div v-if="orderType==1">
        <ul class="order-container__item1-ul">
          <li
            class="order-container__item1-li flex-display"
            v-for="(item,index) in nopaylist"
            :key="index"
          >
            <!-- 选框 -->
            <div
              style="margin:0 6px 0 10px"
              @click="changeCurrentOrderStatic(index,item.isOpen)"
            >
              <img
                :src="item.isOpen ? selectedImg : unSelectedImg"
                class="selectedImg"
              />
            </div>
            <!-- 信息 -->
            <div class="flex-num-one">
              <!-- 商品信息 -->
              <div class="nopay-li-top">
                <div class="nopay-li-top-left">
                  <img :src="item.goods.photo" class="nopay-li-top-left-img" />
                </div>
                <div class="nopay-li-top-right">
                  <p>{{ item.goods.title }}</p>
                  <p>数量：{{ item.goods_counts }}</p>
                  <div class="top-div-box flex-center-align flex-display">
                    <span>¥ {{ item.goods.new_price }}</span>
                    <span @click="fnChange(index)">修改订单</span>
                    <span @click="fnDelete(index)">删除订单</span>
                  </div>
                </div>
              </div>
              <!-- 地址信息 -->
              <div class="nopay-li-bottom">
                <p>
                  <img src="../../static/new/icon_location@2x.png" />
                  送货地址
                </p>
                <p>
                  {{ item.deliver_name }}&nbsp;&nbsp;<span>{{
                    item.phone
                  }}</span>
                </p>
                <p>
                  {{ item.province }}{{ item.city }}{{ item.quxian
                  }}{{ item.address }}
                </p>
              </div>
            </div>
          </li>
          <div v-if="nopaylist.length==0">
            <img
              src="../../static/new/img_empty_order@2x.png"
              alt=""
              style="width: 100%;padding:60px 59px 133px"
            />
          </div>
        </ul>
      </div>
      <div v-if="orderType==2">
        <ul class="order-container__item1-ul" style="padding:10px 20px;">
          <li
            class="order-container__item1-li flex-display"
            v-for="(item,index) in paylist"
            :key="index"
            style="border-bottom: 1px solid #eee;"
          >
            <!-- 信息 -->
            <div class="flex-num-one">
              <!-- 商品信息 -->
              <div class="nopay-li-top">
                <div class="nopay-li-top-left">
                  <img :src="item.goods.photo" class="nopay-li-top-left-img" />
                </div>
                <div class="nopay-li-top-right" style="padding-left: 20px;">
                  <p>{{ item.goods.title }}</p>
                  <p>数量：{{ item.goods_counts }}</p>
                  <div class="top-div-box flex-center-align flex-display">
                    <span class="flex-num-one"
                      >¥ {{ item.goods.new_price }}</span
                    >
                  </div>
                </div>
              </div>
              <span
                v-if="item.order_no"
                v-clipboard:copy="item.phone"
                v-clipboard:success="onCopy"
                style="font-size:12px;"
                >订单号：{{ item.order_no }}</span
              >
              <!-- 地址信息 -->
              <div class="nopay-li-bottom">
                <p>
                  <img src="../../static/new/icon_location@2x.png" />
                  送货地址
                </p>
                <p class="flex-display">
                  <span class="flex-num-one">{{ item.deliver_name }}</span>
                  <span class="flex-num-three">{{ item.phone }}</span>

                  <!-- <span>订单号：4684646546846846</span> -->
                </p>
                <p>
                  {{ item.province }}{{ item.city }}{{ item.quxian
                  }}{{ item.address }}
                </p>
                <div class="query-box flex-display flex-right-pack">
                  <span
                    v-if="item.kd_order_no"
                    @click="fnQueryLogistics(item.kd_order_no, item.order_no)"
                    >查询物流</span
                  >
                </div>
              </div>
            </div>
          </li>
          <div v-if="paylist.length==0">
            <img
              src="../../static/new/img_empty_order@2x.png"
              alt=""
              style="width: 100%;padding:60px 59px 133px"
            />
          </div>
        </ul>
      </div>
    </div>

    <!-- 底部背景图 -->
    <div
      style="background: url('../../static/new/img_bg_bottom@2x.png');width:100%;height: 120px;background-size: cover;;margin-top: -50px;"
    ></div>

    <!-- 底部信息展示 -->
    <div class="bottom" v-if="isShowTotal">
      <div @click="changeAll">
        <img
          :src="allSelect==true?selectedImg:unSelectedImg"
          style="width: 17px;height: 17px;"
        />
        全选
      </div>
      <div>合计: ¥ <span v-html="total.toFixed(2)"></span></div>
      <div @click="fnPay" class="topay">
        去结算
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from "vue";
  import axios from "axios";
  import api from "@/fetch/api";
  import { Navbar, TabItem, Cell, Toast, MessageBox } from "mint-ui";
  import ComHeader from "@/common/ComHeader";

  export default {
    name: "spike",
    components: {
      Navbar,
      TabItem,
      Toast,
      MessageBox
    },
    data() {
      return {
        // 秒杀商品列表
        goodslist: [],
        // 未支付商品列表
        nopaylist: [],
        // 已支付商品列表
        paylist: [],
        // 订单详情默认选中
        selected2: "1",
        orderType: 1,
        selectedImg: "../../static/new/icon_checked@3x.png",
        unSelectedImg: "../../static/new/icon_unchecked@3x.png",
        allSelect: "",
        total: 0,
        ethelWxUserInfo: "",
        timer: null,
        day: 0, // 结束天数
        endHours: "0", // 结束时
        endMinutes: "0", // 结束分
        endSecnods: "0", // 结束秒
        isShowList: false,
        isShowTotal: false,
        bugNum: 0,
        // 是否过期
        expired: false
      };
    },
    created() {
      console.log(document);
      // 重置参数

      if (window.localStorage.getItem("allmsg")) {
        window.localStorage.setItem("change", true);
        window.localStorage.removeItem("allmsg");
      } else {
        window.localStorage.setItem("change", false);
      }
      this.ethelWxUserInfo = window.localStorage.getItem(this.companyUnique)
        ? JSON.parse(window.localStorage.getItem(this.companyUnique))
        : "";

      this.allSelect = this.unSelectedImg;
      // 获取秒杀商品
      this.fnGetSpike();

      // 获取待支付
      this.fnGetNopay();

      // 获取已支付
      this.fnGetPay();

      // 获取团队购买数量
      this.getteamsum();
    },
    methods: {


      fnQueryLogistics(code, order_no) {
        this.$router.push({
          path: "/killCourier",
          query: {
            code: code,
            order_no: order_no,
            userid: this.ethelWxUserInfo.id
          }
        });
      },


      // 支付成功后，返回第二个tabbar
      toOrderType() {
        this.orderType = 2;
      },

      // 点击复制内容
      onCopy() {
        Toast({
          message: "复制成功",
          duration: 1000
        });
      },

      // 获取团队购买数量
      getteamsum() {
        const params6 = {
          userid: this.ethelWxUserInfo.id
        };
        api.getteamsum(params6).catch(res => {
          console.log(999999, res);
          this.bugNum = res.data.all_count;
        });
      },


      /**
       * @author yang
       * @param time {Date} 时间戳
       */
      fnCountdown(time) {
        let targetTime = this.TransformationTime(time);
        // 调用倒计时

        this.countdownFn(targetTime);
      },

      // 删除商品
      fnDelete(index) {
        MessageBox.confirm("是否确定删除该商品?").then(action => {
          //  console.log(666)
          const params5 = {
            userid: this.ethelWxUserInfo.id,
            order_no: this.nopaylist[index].order_no
          };
          console.log(params5);
          api.cancelorder(params5).catch(res => {
            // console.log(114, res);
            Toast({
              message: res.data.msg,
              duration: 2000
            });
            this.fnGetNopay();
          });
        });
        // console.log(index)
      },

      // 修改订单
      fnChange(index) {
        // console.log(index);
        // this.fnPalyer(this.goodslist[0])
        // console.log("this.nopaylist[index]", this.nopaylist[index]);
        // console.log(
        //   "this.nopaylist[index].order_no",
        //   this.nopaylist[index].order_no
        // );
        window.localStorage.setItem("goodsItem", this.nopaylist[index].goods);
        this.fnPalyer(
          this.nopaylist[index].goods,
          "change",
          this.nopaylist[index].order_no,
          this.nopaylist[index]
        );
      },
      formatDate(date) {
        return new Date(date.replace(/-/g, "/"));
      },
      // 获取秒杀商品
      fnGetSpike() {
        const params = {
          type: "ms",
          userid: this.ethelWxUserInfo.id
        };
        api.getGoodsInfo(params).catch(res => {
          console.log("获取秒杀商品", res);
          // 调用倒计时方法
          if (res.data.length > 0) {
            this.fnCountdown(
              Date.parse(this.formatDate(res.data[0].past_time))
            );
            this.goodslist = res.data;
            this.expired = false;
          } else {
            this.expired = true;
          }
        });
      },

      // 获取待支付
      fnGetNopay() {
        const params2 = {
          userid: this.ethelWxUserInfo.id,
          get_type: "nopay"
        };
        api.getkillorder(params2).catch(res => {
          console.log("获取待支付", res);
          if (res.data.code != 0) {
            res.data.results.forEach(item => {
              item.isOpen = false;
            });
            this.nopaylist = res.data.results.reverse();
            // this.nopaylist = res.data.results;
            console.log("获取待支付", res.data.results);
            if (this.nopaylist.length > 0 || this.paylist.length > 0) {
              this.isShowList = true;
              if (this.nopaylist.length == 0) {
                this.isShowTotal = false;
              } else {
                this.isShowTotal = true;
              }
            } else {
              this.isShowList = false;
              this.isShowTotal = false;
            }
            // 如果没有未支付订单，不显示结算按钮
          }
        });
      },

      // 获取已支付
      fnGetPay() {
        const params3 = {
          userid: this.ethelWxUserInfo.id,
          get_type: "pay"
        };
        api.getkillorder(params3).catch(res => {
          console.log("获取已支付", res);
          this.paylist = res.data.results;
          if (this.nopaylist.length > 0 || this.paylist.length > 0) {
            this.isShowList = true;
            if (this.nopaylist.length == 0) {
              this.isShowTotal = false;
            } else {
              this.isShowTotal = true;
            }
          } else {
            this.isShowList = false;
            this.isShowTotal = false;
          }
        });
      },

      // 触发函数
      fnPalyer(item, str, order_no, all) {
        console.log("触发函数", item, str, order_no, all);
        // 如果没过期，则触发函数
        if (!this.expired) {
          this.$emit("fn-player-submit", item, str, order_no, all);
          // 如果过期了，则提示已过期，不触发打开界面的函数
        } else {
          Toast({
            message: "活动已结束",
            duration: 2000
          });
        }
      },

      hsToDetaillist() {
        console.log(666);
      },

      // 列表tabbar标签切换
      fnChangeOrderType(num) {
        this.orderType = num;
      },

      /**
       * @desc    改变订单选中状态
       * @author  ye
       * @param   index 当前按钮索引值，isOpen，当前按钮状态
       */
      changeCurrentOrderStatic(index, isOpen) {
        console.log(index);
        if (isOpen == true) {
          this.nopaylist[index].isOpen = false;
        } else {
          this.nopaylist[index].isOpen = true;
        }
      },

      // 全选
      changeAll() {
        // var a = true
        // console.log('changeAll',a)
        // console.log(this.allSelect)
        this.allSelect = !this.allSelect;
        for (var i = 0; i < this.nopaylist.length; i++) {
          this.nopaylist[i].isOpen = this.allSelect;
        }
      },

      // 去付款
      fnPay() {
        // console.log(666)
        // 获取待支付
        var arr = [];
        for (var i = 0; i < this.nopaylist.length; i++) {
          if (this.nopaylist[i].isOpen == true) {
            arr.push(this.nopaylist[i].order_no);
          }
        }

        if (arr.length == 0) {
          Toast({
            message: "请选择商品",
            duration: 2000
          });
          return;
        }
        const params4 = {
          order_nos: arr,
          total_fee: parseFloat(this.total)
        };
        this.$emit("fn-pay-submit", params4);
      },

      /**
       * @desc 转换后的时间 进行倒计时处理
       * @author yang
       * @param {String} endDateStr  时间格式 2018-11-22 xxx
       */
      countdownFn(endDateStr) {
        // 结束时间
        let endDate = new Date(this.formatDate(endDateStr));
        // 当前时间
        let nowDate = new Date();
        // 相差的总秒数
        let totalSeconds = parseInt((endDate - nowDate) / 1000);
        // 取模（余数）
        let modulo = totalSeconds % (60 * 60 * 24);
        // 天
        let day = parseInt(Math.abs(endDate - nowDate) / 1000 / 60 / 60 / 24);

        // 小时数
        let hours = Math.floor(modulo / (60 * 60));
        modulo = modulo % (60 * 60);
        // 分钟
        let minutes = Math.floor(modulo / 60);
        // 秒
        let seconds = modulo % 60;
        this.day = day;
        this.endHours = hours < 10 ? "0" + hours : hours;
        this.endMinutes = minutes < 10 ? "0" + minutes : minutes;
        this.endSecnods = seconds < 10 ? "0" + seconds : seconds;

        // 延迟一秒执行
        this.timer = setTimeout(() => {
          this.countdownFn(endDateStr);
        }, 1000);
      }
    },

    destroyed: function() {
      this.timer = null;
    },
    watch: {
      // 监听数据列表
      nopaylist: {
        immediate: true, //默认执行一次，开始或者刷新的时候就监听一次
        deep: true, //深度监听
        handler(new_val, old_val) {
          console.log("nopaylist");
          console.log(this.nopaylist);
          // 缓存总和
          var a = 0;
          // 判断开关
          var b = true;
          // 循环数据
          for (var i = 0; i < this.nopaylist.length; i++) {
            if (this.nopaylist[i].isOpen == true) {
              // 计算总和
              a +=
                this.nopaylist[i].goods_counts *
                this.nopaylist[i].goods.new_price;
            } else {
              b = false;
              // this.allSelect = false
              // return
            }
          }
          // 容错
          if (this.nopaylist.length == 0) {
            this.allSelect = false;
            return;
          }
          if (b == true) {
            this.allSelect = true;
          } else {
            this.allSelect = false;
          }
          this.total = a;
        }
      }
    }
  };
</script>

<style lang="stylus" scoped>
    .goods{
      width: 100%;
      display: flex;
      background: #fff;
      /* height: 200px; */
    }

    .query-box span {
      display: inline-block;
      padding: 2px 10px;
      color: #fff;
      border-radius: 5px;
      background: #ffa1b0;
    }
    .expre-box__img {
      width: 265px;
      height 225px;
      position relative;
      margin: -70px auto 0;
      img {
        width: 100%;
        height:100%;
      }
    }
    .expre-buy__img {
      width: 86px;
      height 37px;
      position relative;
      margin: -80px 0% 0 50%;
      img {
        width: 100%;
        height:100%;
      }
    }
    .countBox {
      width 100%;
      bottom: -8px;
      left: 0;
      right 0;
      position absolute;
      > .countBox-info {
        width: 50%;
        height: 35px;
        line-height: 35px;
        position relative;
        span{
            position: absolute;
            left: 42%;
            color #ffa1b0
            &:nth-of-type(2) {
              left: 61%;
            }
            &:nth-of-type(3) {
              left: 76%;
            }
            &:nth-of-type(4) {
              left: 91%;
            }
        }
      }
    }
    .goods-right{
      flex:1;
      padding:15px 15px 15px 6px;
      font-size:14px;
      font-family:'SourceHanSansCN-Medium';
      font-weight:600;
      color:rgba(65,61,61,1);
      line-height:18px;
      position: relative;
    }
    .goods-right>p:nth-child(2){
      background:rgba(255,255,255,1);
      font-weight:500;
      margin-top: 8px;
      color:rgba(160,154,155,1);
      font-size:12px;
    }
    .goods-btn{
      background:rgba(255,161,176,1);
      height: 40px;
      width: 88%;
      vertical-align: middle;
      position: absolute;
      display: flex;
      align-items: center;
      right: 15px;bottom: 15px;
    }
    .goods-btn span:nth-child(1){
      font-size:21px;
      font-family:'SourceHanSansCN-Medium';
      font-weight:600;
      color:rgba(255,255,255,1);
      /* line-height:40px; */
      padding-left: 8px;
    }
    .goods-btn span:nth-child(2){
      font-size:10px;
      font-family:'SourceHanSansCN-Medium';
      font-weight:600;
      color:rgba(255,255,255,1);
    }
    .goods-btn span:nth-child(3){
      font-size:14px;
      font-family:'SourceHanSansCN-Medium';
      font-weight:500;
      color:rgba(255,255,255,1);
      padding-left: 25px;
    }
    .goods>div{flex:1;}



    .bottom{
      position: fixed;left: 0;bottom: 0;
      background:rgba(255,255,255,1);
      display: flex;
      width: 100%;
      height:50px;
      align-items: center;
      line-height: 50px;
      z-index: 200;
    }
    .bottom>div:nth-child(1){
      flex:1;
      font-size:14px;
      font-family:'SourceHanSansCN-Medium';
      font-weight:500;
      color:rgba(255,161,176,1);
      padding-left: 20px;
    }
    .bottom>div:nth-child(2){
      flex:2;
      font-size:16px;
      font-family:'SourceHanSansCN-Medium';
      font-weight:500;
      color:rgba(255,161,176,1);
      text-align: center
    }
    .bottom>div:nth-child(3){
      width: 125px;
      background:rgba(255,161,176,1);
      text-align: center
    }


    .topay{
      font-size:14px;
      font-family:'SourceHanSansCN-Medium';
      font-weight:600;
      color:rgba(255,255,255,1);
    }

     /* 订单ul */
     .order-container__item1-ul{
      min-height: 100px;background:rgba(255,255,255,1);
    }

    /* 订单li */
    .order-container__item1-li{
      background:rgba(255,255,255,1);
      padding:15px 5px;
    }

    /* 选框图片样式 */
    .selectedImg{
      width: 17px;height: 17px;
      margin-top: 30px;
    }
    .nopay-li>div:nth-child(1){
      flex:1
    }
    .nopay-li>div:nth-child(2){
      flex:15
    }
    .nopay-li-top{
      display: flex;
    }

    /* 订单左侧 */
    .nopay-li-top-left{
      flex:1
    }
    /* 订单左侧图片 */
    .nopay-li-top-left-img{
      width: 98%;align-items: center;
    }

    /* 订单右侧 */
    .nopay-li-top-right{
      flex:3;
      box-sizing: border-box;
      /* padding-left:10px; */
    }

    /* 右第一行 */
    .nopay-li-top-right :nth-child(1){
      font-size:14px;
      font-family:'SourceHanSansCN-Medium';
      font-weight:600;
      color:rgba(61,50,55,1);
      line-height:17px;
    }
    /* 右第二行 */
    .nopay-li-top-right :nth-child(2){
      font-size:12px;
      font-family:'SourceHanSansCN-Regular';
      font-weight:400;
      color:rgba(160,154,155,1);
      margin-top: 5px;
    }
    /* 右第三行 */
    /* 左侧金额 */
    .top-div-box :nth-child(1){
      font-size:16px;
      font-family:'SourceHanSansCN-Medium';
      font-weight:600;
      color:rgba(255,161,176,1);
      padding-right: 20px;
    }
    /* 右侧按钮 */
    .top-div-box :nth-child(2){
      flex:1;
      padding:8px 0px;
      background:rgba(255,161,176,1);
      font-size:14px;
      font-family:'SourceHanSansCN-Medium';
      color:rgba(255,255,255,1);
      text-align: center;
    }
      /* 右侧按钮 */
    .top-div-box :nth-child(3){
      flex:1;
      margin-left: 5px;
      margin-top: 5px;
      padding:8px 0px;
      background:rgba(255,161,176,1);
      font-size:14px;
      font-family:'SourceHanSansCN-Medium';
      color:rgba(255,255,255,1);
      text-align: center;
    }
      /* 地址第一行 */
   .nopay-li-bottom p:nth-child(1){
      line-height: 10px;
      margin: 10px 0;
      color:rgba(160,154,155,1);
      font-size:12px;
    }

    /* 地址第一行图片 */
    .nopay-li-bottom p:nth-child(1) img{
      width: 8px;height:10px;
      margin-bottom: 3px;
    }

    /* 地址第二行 */
    .nopay-li-bottom p:nth-child(2){
      font-size:12px;
      font-family:'SourceHanSansCN-Regular';
      font-weight:400;
      color:rgba(65,61,61,1);
      padding-bottom: 2px;
    }

    /* 地址第三行 */
    .nopay-li-bottom p:nth-child(3){
      font-size:12px;
      font-family:'SourceHanSansCN-Regular';
      font-weight:400;
      color:rgba(65,61,61,1);
    }
    .box{
    position: absolute;left: 0;bottom:0px;
  }
  .box p{
    font-size:14px;
    font-family:'SourceHanSansCN-Medium';
    font-weight:600;
    color:rgba(255,161,176,1);
    width: 100%;
  }
  .msg{
    text-align: center;
    background:rgba(255,255,255,1);
    font-size:17px;
    font-family:'SourceHanSansCN-Medium';
    font-weight:600;
    color:rgba(36,33,33,1);
    line-height:40px;
    border-bottom: 1px solid #eee;
  }

  /* 秒杀盒子 */
  .expre-box{
    padding:0 15px 15px 15px;
    width: 100%;
    padding-bottom:60px ;
    position: relative;
    box-sizing: border-box;
  }
  .top-btn{
      background:rgba(255,255,255,1);
    }
    .top-btn>div{
      flex:1;
      text-align: center;
      font-size: 14px;
      padding:10px 0;
      margin:0 auto;
    }
    .fw-600{
      font-weight: 600;
    }
    .orderType-haveline{
      /* border-bottom: 3px solid rgba(254,160,175,1); */
    }
    .orderType-noline{
      border-bottom: 3px solid #fff;
    }
    .line-box{
      background:rgba(255,255,255,1);
    }
    .line{
      width: 30%;
      border-bottom: 3px solid rgba(254,160,175,1);
      background: #fff;
    }
    .changemargin-a{
      margin-left: 10%;
    }
    .changemargin-b{
      margin-left: 60%;
    }
    .img-top {
    width: 100%;
    height: 313px;
  }
  .time-box {
    bottom: 8px;
    left: 0;
  }
  .order-box {
    margin: 30px 15px 0;
    z-index: 5;
  }
</style>

